<template>
	<div class="shoppingCart">
		<!-- 购物车头部 -->
		<div class="cart-header">
			<div class="cart-header-content">
				<p>
					<i class="el-icon-shopping-cart-full" style="color:#ff6700; font-weight: 600;"></i>
					我的购物车
				</p>
				<span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
			</div>
		</div>
		<!-- 购物车头部END -->

		<!-- 购物车主要内容区 -->
		<div class="content" v-if="getShoppingCart.length>0">
			<ul>
				<!-- 购物车表头 -->
				<li class="header">
					<div class="pro-check">
						<el-checkbox v-model="isAllCheck">全选</el-checkbox>
					</div>
					<div class="pro-img">图片</div>
					<div class="pro-name">名称</div>
					<div class="pro-price">单价</div>
					<div class="pro-num">数量</div>
					<div class="pro-total">小计</div>
					<div class="pro-action">操作</div>
				</li>
				<!-- 购物车表头END -->

				<!-- 购物车列表 -->
				<li class="product-list" v-for="(item,index) in getShoppingCart" :key="item.id">
					<div class="pro-check">
						<el-checkbox :value="item.check" @change="checkChange($event,index)"></el-checkbox>
					</div>
					<div class="pro-img">
						<router-link :to="{ path: '/goods/details', query: {productID:item.productId} }">
							<img :src="item.productImage" />
						</router-link>
					</div>
					<div class="pro-name">
						<router-link :to="{ path: '/goods/details', query: {productID:item.productId} }">{{item.productName}}</router-link>
					</div>
					<div class="pro-price">{{item.price}}元</div>
					<div class="pro-num">
						<el-input-number size="small" :step="1"  v-model="item.count" @change="handleChange($event,index,item)" :min="1" :max="9"></el-input-number>
					</div>
					<div class="pro-total pro-total-in">{{item.itemTotalPrice}}元</div>
					<div class="pro-action">
						<el-popover placement="right">
							<p>确定删除吗？</p>
							<div style="text-align: right; margin: 10px 0 0">
								<el-button type="primary" size="mini" @click="deleteItem($event,item.id,item.productID)">确定</el-button>
							</div>
							<i class="el-icon-error" slot="reference" style="font-size: 18px;"></i>
						</el-popover>
					</div>
				</li>
				<!-- 购物车列表END -->
			</ul>

			<div style="height:20px;background-color: #f5f5f5"></div>
			<!-- 购物车底部导航条 -->
			<div class="cart-bar">
				<div class="cart-bar-left">
					<span>
						<router-link to="/goods">继续购物</router-link>
					</span>
					<span class="sep">|</span>
					<span class="cart-total">
						共
						<span class="cart-total-num">{{getNum}}</span> 件商品，已选择
						<span class="cart-total-num">{{getCheckNum}}</span> 件
					</span>
				</div>
				<div class="cart-bar-right">
					<span>
						<span class="total-price-title">合计：</span>
						<span class="total-price">{{getTotalPrice}}元</span>
					</span>
					<div style="cursor: pointer;" :class="getCheckNum > 0 ? 'btn-primary' : 'btn-primary-disabled'" @click="goConfirmOrder">去结算</div>
				</div>
			</div>
			<!-- 购物车底部导航条END -->
		</div>
		<!-- 购物车主要内容区END -->
		<!-- 购物车为空的时候显示的内容 -->
		<div v-else class="cart-empty">
			<div class="empty">
				<h2>您的购物车还是空的！</h2>
				<p>快去购物吧！</p>
			</div>
		</div>
		<!-- 购物车为空的时候显示的内容END -->

	</div>
</template>

<script>
	import {
		mapActions
	} from "vuex";
	import {
		mapGetters
	} from "vuex";

	import cartAPI from '../api/cart.js'
	import cartItemAPI from '../api/cartItem.js'

	export default {
		name: "Cart",
		data() {
			return {}
		},
		methods: {
			...mapActions(["updateShoppingCart", "deleteShoppingCart", "checkAll"]),

			// 修改商品数量时，调用该函数
			handleChange(currentValue, key, item) {
				console.log('currentValue',currentValue);
				console.log('key',key);
				console.log('item',item);
				const totalprice = (item.price * currentValue).toFixed(2)
				this.updateShoppingCart({// // 当修改数量时，默认勾选
					key: key,
					prop: "check",
					val: true
				}) 
				cartItemAPI.updateCartItem({
					"itemTotalPrice": totalprice,
					"count": currentValue,
					"id": item.id
				}).then(res=>{
					// 更新vuex状态
					this.updateShoppingCart({
					  key: key,
					  prop: "itemTotalPrice",
					  val: totalprice
					});
					// 提示更新成功信息
					this.notifySucceed('更新成功');
				})

			},

			// 更新vuex中购物车商品是否勾选的状态
			checkChange(val, key) {
				this.updateShoppingCart({
					key: key,
					prop: "check",
					val: val
				});
			},

			// 删除一个购物项
			deleteItem(e, id) {
				cartItemAPI.removeCartItem([id]).then(res => {
					// 更新vuex状态
					this.deleteShoppingCart(id);
					// 提示删除成功信息
					this.notifySucceed('删除成功！');
				})
			},

			goConfirmOrder() {
				// console.log(this.getCheckGoods,this.getTotalPrice);
				if(this.getCheckNum > 0) {
					var orderItems = []
					this.getCheckGoods.forEach(item=>{
						orderItems.push({
							"productId":item.productId,
							"productName":item.productName,
							"productImage":item.productImage,
							"count":item.count,
							"price":item.price
						})
					})
					
					this.$router.push({ 
						path: '/confirmOrder', 
						query: {
							"orderItems" : orderItems,
							"payAmount" : this.getTotalPrice,
							"fromCart" : true
						}
					})
				}
			}
		},
		computed: {

			...mapGetters([
				"getShoppingCart",
				"getCheckGoods",
				"getCheckNum",
				"getTotalPrice",
				"getNum"
			]),

			isAllCheck: {
				get() {
					return this.$store.getters.getIsAllCheck;
				},
				set(val) {
					this.checkAll(val);
				}
			}
		}
	}
</script>


<style scoped>
.shoppingCart {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
/* 购物车头部CSS */
.shoppingCart .cart-header {
  height: 64px;
  border-bottom: 2px solid #ff6700;
  background-color: #fff;
  margin-bottom: 20px;
}
.shoppingCart .cart-header .cart-header-content {
  width: 1225px;
  margin: 0 auto;
}
.shoppingCart .cart-header p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}
.shoppingCart .cart-header span {
  color: #757575;
  font-size: 12px;
  float: left;
  height: 20px;
  line-height: 20px;
  margin-top: 30px;
  margin-left: 15px;
}
/* 购物车头部CSS END */

/* 购物车主要内容区CSS */
.shoppingCart .content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
}

.shoppingCart .content ul {
  background-color: #fff;
  color: #424242;
  line-height: 85px;
}
/* 购物车表头及CSS */
.shoppingCart .content ul .header {
  height: 85px;
  padding-right: 26px;
  color: #424242;
}
.shoppingCart .content ul .product-list {
  height: 85px;
  padding: 15px 26px 15px 0;
  border-top: 1px solid #e0e0e0;
}
.shoppingCart .content ul .pro-check {
  float: left;
  height: 85px;
  width: 110px;
}
.shoppingCart .content ul .pro-check .el-checkbox {
  font-size: 16px;
  margin-left: 24px;
}
.shoppingCart .content ul .pro-img {
  float: left;
  height: 85px;
  width: 120px;
}
.shoppingCart .content ul .pro-img img {
  height: 80px;
  width: 80px;
}
.shoppingCart .content ul .pro-name {
  float: left;
  width: 380px;
}
.shoppingCart .content ul .pro-name a {
  color: #424242;
}
.shoppingCart .content ul .pro-name a:hover {
  color: #ff6700;
}
.shoppingCart .content ul .pro-price {
  float: left;
  width: 140px;
  padding-right: 18px;
  text-align: center;
}
.shoppingCart .content ul .pro-num {
  float: left;
  width: 150px;
  text-align: center;
}
.shoppingCart .content ul .pro-total {
  float: left;
  width: 120px;
  padding-right: 81px;
  text-align: right;
}
.shoppingCart .content ul .pro-total-in {
  color: #ff6700;
}
.shoppingCart .content ul .pro-action {
  float: left;
  width: 80px;
  text-align: center;
}
.shoppingCart .content ul .pro-action i:hover {
  color: #ff6700;
}
/* 购物车表头及CSS END */

/* 购物车底部导航条CSS */
.shoppingCart .cart-bar {
  width: 1225px;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
}
.shoppingCart .cart-bar .cart-bar-left {
  float: left;
}
.shoppingCart .cart-bar .cart-bar-left a {
  line-height: 50px;
  margin-left: 32px;
  color: #757575;
}
.shoppingCart .cart-bar .cart-bar-left a:hover {
  color: #ff6700;
}
.shoppingCart .cart-bar .cart-bar-left .sep {
  color: #eee;
  margin: 0 20px;
}
.shoppingCart .cart-bar .cart-bar-left .cart-total {
  color: #757575;
}
.shoppingCart .cart-bar .cart-bar-left .cart-total-num {
  color: #ff6700;
}
.shoppingCart .cart-bar .cart-bar-right {
  float: right;
}
.shoppingCart .cart-bar .cart-bar-right .total-price-title {
  color: #ff6700;
  font-size: 14px;
}
.shoppingCart .cart-bar .cart-bar-right .total-price {
  color: #ff6700;
  font-size: 30px;
}
.shoppingCart .cart-bar .cart-bar-right .btn-primary {
  float: right;
  width: 200px;
  text-align: center;
  font-size: 18px;
  margin-left: 50px;
  background: #ff6700;
  color: #fff;
}
.shoppingCart .cart-bar .cart-bar-right .btn-primary-disabled {
  float: right;
  width: 200px;
  text-align: center;
  font-size: 18px;
  margin-left: 50px;
  background: #e0e0e0;
  color: #b0b0b0;
}
.shoppingCart .cart-bar .cart-bar-right .btn-primary:hover {
  background-color: #f25807;
}
/* 购物车底部导航条CSS END */
/* 购物车主要内容区CSS END */

/* 购物车为空的时候显示的内容CSS */
.shoppingCart .cart-empty {
  width: 1225px;
  margin: 0 auto;
}
.shoppingCart .cart-empty .empty {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
  color: #b0b0b0;
  overflow: hidden;
}
.shoppingCart .cart-empty .empty h2 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.shoppingCart .cart-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
/* 购物车为空的时候显示的内容CSS END */
</style>